<template>
	<el-pagination
		background
		:total="total"
		:layout="pageLayout"
		v-bind="$attrs"
		class="sw-pagination"
		:page-sizes="pageSizes"
		:page-size.sync="pageSize"
		:current-page.sync="curPage"
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
	>
		<span class="el-pagination__total">共 {{ total }} 条{{ notice }}</span>
	</el-pagination>
</template>

<script>
export default {
	name: 'swPagination',
	props: {
		total: { require: true, type: Number },
		page: { require: true, type: Number, default: 1 },
		limit: { require: true, type: Number, default: 15 },
		notice: { type: String, default: '数据' },
		isSizes: { type: Boolean, default: true },
		isJumper: { type: Boolean, default: true }
	},
	data() {
		return {
			pageSizes: []
		};
	},
	computed: {
		curPage: {
			get() {
				return this.page;
			},
			set(val) {
				this.$emit('update:page', val);
			}
		},
		pageSize: {
			get() {
				return this.limit;
			},
			set(val) {
				this.$emit('update:limit', val);
			}
		},
		pageLayout() {
			let layout = [];
			if (!this.layout) {
				layout = ['slot', 'prev', 'pager', 'next'];
			} else {
				layout = this.layout.split(',');
			}
			if (!!this.isSizes) {
				layout.splice(1, 0, 'sizes');
			}
			if (!!this.isJumper) {
				layout.push('jumper');
			}
			return layout.join(',');
		}
	},
	mounted() {
		this.pageSizes = this.returnPageSizes();
	},
	methods: {
		returnPageSizes() {
			return [0, 1, 2, 3].map((n) => this.limit * Math.pow(2, n));
		},
		handleSizeChange(val = this.limit) {
			this.$emit('change');
		},
		handleCurrentChange(val = this.page) {
			this.$emit('change');
		}
	}
};
</script>

<style lang="scss" scoped>
.sw-pagination {
	&:deep(button),
	&:deep(span:not([class*='suffix'])) {
		font-size: 15px;
	}
}
.el-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 0;
	line-height: 0;
	flex-shrink: 0;

	&:deep(.el-pagination__total) {
		flex: 1;
		overflow: hidden;
		font-weight: normal;
	}

	&:deep(.el-pagination__jump) {
		display: flex;
		align-items: center;
		margin-left: 16px;
	}

	&:deep(.el-pagination__sizes) {
		line-height: 1 !important;
	}

	&.is-background {
		.btn-prev {
			margin-left: 0;
		}

		.btn-next {
			margin-right: 0;
		}
	}
}
</style>
